<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {
      timeInterval: null,
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    // id: {
    //   type: String,
    //   default: () => {
    //     return ''
    //   },
    // },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      var fourPieData = this.data
      let dataArr = []
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: '#2ac9e1',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)',
              },
            },
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)',
              },
            },
          })
        }
      }
      let titleArr = [],
        seriesArr = [],
        colors = [
          ['#57bbf7', '#2657a4'],
          ['#ffc969', '#2657a4'],
          ['#f38b97', '#2657a4'],
          ['#b1d882', '#2657a4'],
          ['#c0acf9', '#2657a4'],
        ],
        sCenter = [],
        TitleXy = {}
      fourPieData.forEach(function (item, index) {
        if (index < 2) {
          sCenter = [index * 35 + 30 + '%', '20%']
          TitleXy = {
            left: index * 35 + 30 + '%',
            top: '40%',
          }
        } else {
          sCenter = [(index - 2) * 35 + 30 + '%', '68%']
          TitleXy = {
            left: (index - 2) * 35 + 30 + '%',
            top: '90%',
          }
        }
        titleArr.push({
          text: item.name,
          textAlign: 'center',
          left: TitleXy.left,
          top: TitleXy.top,
          // 文字 类别
          textStyle: {
            fontSize: '12',
            fontWeight: '400',
            color: '#fff',
            textAlign: 'center',
          },
        })
        seriesArr.push(
          {
            // 外圈的线条
            type: 'pie',
            zlevel: 3,
            silent: true,
            center: sCenter,
            radius: [57, 58],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: dataArr,
          },
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [38, 51],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: sCenter,
            data: [
              {
                value: item.value,
                label: {
                  normal: {
                    formatter: '{d}',
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold',
                      color: colors[index][0], //跟随其他颜色
                    },
                  },
                },
              },
              {
                value: 100 - item.value,
                name: 'invisible',
                itemStyle: {
                  normal: {
                    color: colors[index][1],
                  },
                  emphasis: {
                    color: colors[index][1],
                  },
                },
              },
            ],
          }
        )
      })
      var option = {
        title: titleArr,
        series: seriesArr,
      }
      myChart.setOption(option)
    },
  },
}
</script>
